<template>
    <div>
        <div class="inco_person">
            <Row>
                <Col span = "3">
                <Row>
                    <span @click="handleBasicInfo"><Icon class="accountIcon" type="person" size="100"></Icon></span>
                    <p @click="handleBasicInfo" class="accountIcon" style="text-align:center;margin-right: 40%;color:rgb(46, 161, 238);">基本信息</p>
                </Row>
                </Col>
                <Col span = "21">
                    <Row>
                        <Col span = "4"><h3>基本信息：</h3> </Col>
                    </Row>
                    <Row>
                        <Col span = "20"><span>基本信息中包含了您的地址、邮箱、身份证号等信息。发布服务和需求之前必须点击左侧头像完善您的基本信息，待信息审核通过后您即可进行更多操作。</span></Col>
                    </Row>
                    <Row>
                        <Col span = "20">
                            <span v-if="userInfo.status == 0" style="color:red;">账户基本信息未审核，不能发布任何信息！</span>
                            <span v-if="userInfo.status == 1" style="color:orange;">正在审核，请耐心等待！</span>
                            <span v-if="userInfo.status == 2" style="color:green;">审核通过！</span>
                            <span v-if="userInfo.status == 3" style="color:red;">审核失败，请重新提交审核！</span>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
        <div class="inco_phone">
            <Row>
                <Col span = "3">
                    <span @click="handleChangePhone"><Icon class="accountIcon" type="ipad" size = "100"></Icon></span>
                    <p @click="handleChangePhone" class="accountIcon" style="text-align:center;margin-right: 45%;color:rgb(46, 161, 238);">更换手机</p>
                </Col>
                <Col span = "21">
                    <Row>
                        <Col span = "4"><h3>更换手机：</h3> </Col>
                    </Row>
                    <Row>
                        <Col span = "20"><span>您的手机号码是其他人联系您的有效途径。点击左侧手机按钮您会进入手机号码修改页面，您可以选择手机验证修改和邮箱验证修改两种方式进行验证修改。手机验证修改会验证您的原手机号，通过后才能进行手机号码的修改，如果您的原手机号码已经停止使用，您可以选择邮箱验证,不过选择邮箱验证修改选项前，您需要进行邮箱认证。</span></Col>
                    </Row>
                </Col>
            </Row>
        </div>
        <div class="inco_email" >
            <Row>
                <Col span = "3">
                    <span @click="handleEmailAuth"><Icon class="accountIcon" type="ios-email" size="100"></Icon></span>
                    <p @click="handleEmailAuth" class="accountIcon" style="text-align:center;margin-right: 40%;color:rgb(46, 161, 238);">设置邮箱</p>
                </Col>
                <Col span = "21">
                    <Row>
                        <Col span = "4"><h3>设置邮箱：</h3> </Col>
                    </Row>
                    <Row>
                        <Col span = "20"><span>邮箱是其他人联系您的另一种途径，并且只您换绑手机号码的另一种途径。点击左侧邮件按钮您会跳转到邮箱认证页面，如果您的邮箱已经通过验证则无需再次验证。此外，点击左侧按钮后，您还可以对邮箱进行修改。</span></Col>
                    </Row>
                </Col>
            </Row>
        </div>  
        <div class="inco_locked" >
            <Row>
                <Col span = "3">
                    <span  @click="handleChangePwd"><Icon class="accountIcon" type="locked" size = "100" ></Icon></span>
                    <p @click="handleChangePwd" class="accountIcon" style="text-align:center;margin-right: 40%;color:rgb(46, 161, 238);">密码修改</p>
                </Col>
                <Col span = "21">
                    <Row>
                        <Col span = "4"><h3>密码修改：</h3> </Col>
                    </Row>
                    <Row>
                        <Col span = "20">
                            <span>密码是您的登录凭证。点击左侧图标，您会跳转到密码修改页面，对您的密码进行更改。</span>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
        <div>
            <Modal v-model="change_pwd" width="380px">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>密码修改</span>
                </p>
                <ModifyPassword @on-pwdChange="changeOK"></ModifyPassword>
                <div slot="footer" visible>
                </div>
            </Modal>
        </div>
        <div>
            <Modal ref="changeModel"  v-model="basic_info" width="60%">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>完善基本信息</span>
                </p>
                <Me v-if="basic_info" v-model="userInfo" @on-modify="handleMe"></Me>
                <div slot="footer" visible>
                </div>
            </Modal>
        </div>
        <div>
            <Modal v-model="change_phone" width="380px">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>手机修改</span>
                </p>
                <Row>
                    <Row>
                        <Col span="5"><span>原手机号：</span></Col>
                        <Col span="19">
                            <Input v-model="userInfo.mobile_phone" placeholder="手机"  class = "show_input" readonly></Input>
                        </Col>
                    </Row>
                    <Row class="row">
                        <Col span="5"><span>修改方式：</span></Col>
                        <Col span="19">
                            <Button type="primary" @click = "phoneChange()" >手机验证</Button>
                            <Button type="primary" @click = "emailPhoneChange()" >邮箱验证</Button>
                        </Col>
                    </Row>
                </Row>
                <Form ref="userSafe" :model="userInfo" :rules="ruleValidate" >
                    <Modal v-model="modalStatus" width="380px">
                        <p slot="header" >
                            <Icon type="information-circled"></Icon>
                            <span>手机</span>
                        </p>
                        <div style = "width:100%">
                            <p>为了保障您的账号安全，变更信息前需要验证您的身份！</p>
                            <Row style="height:40px">
                                <Col span = "6"><p>原手机号:</p></Col>
                                <Col span = "10"><Input v-model="userInfo.mobile_phone" placeholder="手机"  readonly ></Input></Col>
                            </Row>
                            <Row style="height:40px">
                                <Col span = "9"><FormItem prop="check"><Input v-model="checkCode" placeholder="请输入验证码" ></Input></FormItem></Col>
                                <Col span = "5"><Button type="primary" @click = "handleGetAuthCode(userInfo.mobile_phone,4)" :disabled="getCheckFlag1">{{getcheck}}</Button></Col>
                            </Row>
                        </div>
                        <p slot="footer">
                            <Button type="primary" @click = "handleCheckAuthCode('userSafe',checkCode)">确认</Button>
                            <Button @click = "handleCancle()">取消</Button> 
                        </p>
                    </Modal>
                </Form>
                    <Modal v-model="emailChangePhone" width="380px">
                        <p slot="header" >
                            <Icon type="information-circled"></Icon>
                            <span>邮箱</span>
                        </p>
                        <div style = "width:100%">
                            <p>为了保障您的账号安全，变更信息前需要验证您的身份！</p>
                            <Row style="height:40px">
                                <Col span = "6"><p>邮箱:</p></Col>
                                <Col span = "12"><Input v-model="userInfo.email" placeholder="邮箱"  readonly ></Input></Col>
                            </Row>
                            <Row style="height:40px">
                                <Form ref="emailFindPhone" :model="userInfo" :rules="ruleValidate" >
                                    <FormItem prop="AuthCode" >
                                        <Input v-model="checkEmailCode" placeholder="请输入验证码" style="width:55%"></Input>
                                        <Button type="primary" @click = "handleGetEmailAuthCode()" >获取邮件验证码</Button>
                                    </FormItem>
                                </Form>
                            </Row>
                        </div>
                        <p slot="footer">
                            <Button type="primary" @click = "handleCheckAuthCode('emailFindPhone',checkEmailCode)">确认</Button>
                            <Button @click = "handleCancle()">取消</Button> 
                        </p>
                    </Modal>
                <Modal v-model="phone_change" width="380px">
                    <p slot="header" >
                        <Icon type="information-circled"></Icon>
                        <span>手机号码修改</span>
                    </p>
                    <Row style="height:40px">
                        <Col span = "6"><p>原手机号：</p></Col>
                        <Col span = "10"><Input v-model="userInfo.mobile_phone" placeholder="手机"  readonly ></Input></Col>
                    </Row>
                    <Row style="height:40px">
                        <Col span = "6"><p>新手机号：</p></Col>
                        <Col span = "10"><Input v-model="newPhone" placeholder="手机"  ></Input></Col>
                    </Row>
                    <Row style="height:40px">
                        <Form ref="newUserPhone" :model="userInfo" :rules="ruleValidate" >
                            <FormItem prop="newcheck">
                                <Input v-model="newChechCode" placeholder="请输入验证码" style="width:50%"></Input>
                                <Button type="primary" @click = "handleGetAuthCode(newPhone,3)" :disabled="getCheckFlag2" >{{getcheck2}}</Button>
                            </FormItem>
                        </Form>
                    </Row>
                    <p slot="footer">
                        <Button type="primary" @click = "handleCheckAuthCode('newUserPhone',newChechCode)">确认</Button>
                        <Button @click = "handleCancle()">取消</Button> 
                    </p>
                </Modal>
                <div slot="footer" visible>
                </div>
            </Modal>
        </div>
        <div>
            <Modal v-model="email_auth" width="380px">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>邮箱认证</span>
                </p>
                <Form ref="Email" :model="userInfo" :rules="ruleValidate" :label-width="80">
                    <FormItem prop="email" label="邮箱账号">
                        <Input v-model="userInfo.email" placeholder="邮箱账号"></Input>
                    </FormItem>
                </Form>
                <div slot="footer" visible>
                    <Button type="primary" long @click="authEmail">{{ this.userInfo.is_email_authed?"修改":"首次认证" }}邮箱</Button>
                </div>
            </Modal>
        </div>
        <div>
            <Modal v-model="change_email" width="400px">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>邮箱修改</span>
                </p>
                <Row>
                    <Row><p>为了保障您的账号安全，变更信息前需要验证您的身份,请您补全邮箱信息！</p></Row>
                    <Row>
                        <Col span="6"><span>当前账号:</span></Col>
                        <Col span="18"><Input v-model="userInfo.email" placeholder="邮箱账号"></Input></Col>
                    </Row>
                    <Row>
                        <Col span="6"><span>完整账号:</span></Col>
                        <Col span="18"><Input v-model="whole_email" placeholder="完整的邮箱账号"></Input></Col>
                    </Row>
                </Row>
                <div slot="footer" visible>
                    <Button type="primary" long  @click="checkOldEmail">确认</Button>
                </div>
            </Modal>
        </div>
        <div>
            <Modal v-model="changeEmail" width="380px">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>邮箱认证</span>
                </p>
                <p>请输入您要绑定的新邮箱</p>
                <Row>
                    <Row>
                        <Col span="24"><Input v-model="newEmail" placeholder="您想要绑定的邮箱账号"></Input></Col>
                    </Row>
                </Row>
                <div slot="footer" visible>
                    <Button type="primary" long @click="NewEmailAuth">确定</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
    import Member from '@/common/model/Member';
    import ModifyPassword from "./modify_password";
    import Me from "./me";
    export default {
        data() {
            const validateCheckCode = (rule, value, callback) => {
                if(this.checkCode === '') {
                    callback(new Error('请输入验证码！'));
                }else {
                    callback();
                }
            };
            const validateNewCheckCode = (rule, value, callback) => {
                if(this.newChechCode === '') {
                    callback(new Error('请输入验证码！'));
                }else {
                    callback();
                }
            };
            const validateEmailCheckCode = (rule, value, callback) => {
                if(this.checkEmailCode === '') {
                    callback(new Error('请输入验证码！'));
                }else {
                    callback();
                }
            }
            return {
                flag1:false,
                flag2:false,
                flag3:false,
                flag4:false,
                flag5:false,
                getCheckFlag1:false,
                getCheckFlag2:false,
                userInfo: new Member(),
                checkCode:'',
                newChechCode:'',
                newPhone:'',
                change_pwd: false,
                basic_info:false,
                change_phone:false,
                change_mode:false,
                modalStatus:false,
                phone_change:false,
                emailChangePhone:false,
                checkEmailCode:"",
                email_auth:false,
                change_email:false,
                whole_email:"",
                changeEmail:false,
                newEmail:"",
                getcheck:"获取验证码",
                getcheck2:"获取验证码",
                nums:60,
                ruleValidate: {
                    check: [
                       { required: true, validator: validateCheckCode, trigger: 'blur' }
                    ],
                    newcheck: [
                        { required: true, validator: validateNewCheckCode, trigger: 'blur' }
                    ],
                    email: [
                        {required:true, message: '请填写邮箱！',trigger: 'blur'},
                        {type:"email", message: '请填写正确格式的邮箱！',trigger: 'blur'}
                    ],
                    AuthCode: [
                        { required:true, validator: validateEmailCheckCode, trigger: 'blur'}
                    ]           
                }
            }
        },
        methods: {
            handleChangePwd() {
                this.change_pwd = true;
            },
            changeOK() {
                this.change_pwd = false;
            },
            handleBasicInfo() {
                this.basic_info = true;
            },
            handleMe() {
                this.basic_info = false;
            },
            handleChangePhone() {
                this.change_phone = true;
            },
            phoneChange() {
                this.modalStatus = true;
                this.change_phone = false;

            },
            handleEmailAuth() {
                this.email_auth = true;
            },
            handleGetAuthCode(phone,status) {
                this.api.post("phone/send_auth_code",{mobile_phone: phone,type_2:status},res=>{
                    this.flag1=res.value;
                    if(this.flag1 == true){
                        this.$CustomMessage.info("验证码发送成功");
                        console.log(res.message);
                        if(this.modalStatus ==true) {
                            this.getCheckFlag1 = true;
                            this.nums = 60;
                            this.getcheck = this.nums+"秒后可重新获取验证码";
                        }else if(this.phone_change = true) {
                            this.getCheckFlag2 = true;
                            this.nums = 60;
                            this.getcheck2 = this.nums+"秒后可重新获取验证码";
                        }
                        this.clock = setInterval( res => {
                        this.nums--;
                        if(this.nums > 0){
                            if(this.modalStatus ==true) {
                                this.getcheck=this.nums+"秒后可重新获取验证码";
                            }else if(this.phone_change ==true){
                                this.getcheck2 = this.nums+"秒后可重新获取验证码";
                            }
                        }
                        else{
                            clearInterval(this.clock);
                            if(this.modalStatus == true) {
                                this.getCheckFlag1 = false;
                            }else if(this.change_phone == true) {
                                this.getCheckFlag2 = false;
                            }
                            this.getcheck = "获取验证码";
                            this.getcheck2 = "获取验证码";
                        }
                    }, 1000);
                    }
                    else
                    {
                        this.$CustomMessage.info(res.message);
                    }     
                })
            },
            handleCheckAuthCode(name,Code) {
                this.$refs[name].validate((valid) => {
                    if(valid) {
                        this.api.post("phone/check_auth_code",{auth_code: Code}, res => {
                            this.flag2 =res.value;
                            if(this.flag2 === true) {
                                this.modalStatus = false;
                                this.phone_change = !this.phone_change;
                                this.emailChangePhone = false;
                                clearInterval(this.clock);
                                if(this.newPhone !='')
                                {
                                    this.api.post("member/change_phone",{newPhone: this.newPhone, id:this.userInfo.id}, res => {
                                        this.flag3 = res.value;
                                        if(this.flag3 === false) {
                                            this.$CustomMessage.error(res.message);
                                        }else {
                                            this.$CustomMessage.info(res.message);
                                            this.$store.state.user.info.mobile_phone = this.newPhone;
                                            this.userInfo = this.$store.state.user.info;
                                        }
                                    })
                                }
                            }else {
                                this.$CustomMessage.info('验证码错误！');
                            }
                        })
                    }
                })
            },
            handleCancle() {
                this.modalStatus = false;
                this.phone_change = false;
                this.emailChangePhone = false;
            },
            emailPhoneChange() {
                if(this.userInfo.is_email_authed == false) {
                    this.$CustomMessage.error("请先按照要求进行邮箱认证！");
                    this.change_phone = false;
                }else {
                    this.emailChangePhone = true;
                    this.change_phone = false;
                }

            },
            handleGetEmailAuthCode() {
                this.api.post("member/change_phone_byEmail",{id:this.userInfo.id, name:this.userInfo.username  },res => {
                    if(res.value == true) {
                        this.$CustomMessage.success(res.message);
                    }else {
                        this.$CustomMessage.error(res.message);
                    }
                });
            },
            authEmail() {
                this.$refs.Email.validate((valid =>{
                    if(valid)
                    {
                        if(this.userInfo.is_email_authed == false) {
                            this.api.post("authEmail/valid_email",{ email:this.userInfo.email,type_2:this.userInfo.is_email_authed?3:1},res => {
                                this.flag4=res.value;
                                console.log(res.message);
                                if(this.flag4 ==true) { 
                                 this.$CustomMessage.info(res.message);
                                 this.email_auth = false;
                                 this.$store.state.user.info.email = this.userInfo.email;
                                 this.userInfo = this.$store.state.user.info;
                                }
                            });
                        }else {
                            this.email_auth = false;
                            this.change_email = true;
                        }
                            }
                        }))
            },
            checkOldEmail() {
                this.api.post("authEmail/check_old_email", {id:this.userInfo.id,whole_email:this.whole_email},res => {
                    this.flag5 = res.value;
                    if(this.flag5 == true){
                        this.change_email = false;
                        this.changeEmail = true;
                    }else {
                        this.$CustomMessage.info(res.message);
                    }
            })
            },
            NewEmailAuth() {
                this.api.post("authEmail/valid_email",{email:this.newEmail,type_2:2},res => {
                    if(res.value == true) {
                        this.$CustomMessage.success(res.message);
                        this.changeEmail = false;
                    }else {
                        this.$CustomMessage.error(res.message);
                    }                    
                })
            }
        },
        components: {
            ModifyPassword,
            Me,
        },
        created() {
            this.api.post("me/get_info", null,res => {
                this.userInfo.parse(res.data);
            })
        }
    }
</script>

<style scoped>
    .ivu-icon {
    display: inline-block;
    font-family: Ionicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgb(46, 161, 238);
}
    .inco_person {
        margin-top: 10%;
        margin-left: 20%;
    }
    .inco_phone {
        margin-top: 3%;
        margin-left: 20%;
    }
    .inco_email {
        margin-top: 3%;
        margin-left: 20%;
    }
    .inco_locked {
        margin-top: 3%;
        margin-left: 20%;
    }
    .inco_locked h3 {
        margin-top: 14%;
    }
    .inco_person h3 {
        margin-top: 10%;
    }
    .show_input
    {
        width: 65%;
    }
    .ivu-row {
        position: relative;
        margin-left: 0;
        margin-right: 0;
        height: auto;
        zoom: 1;
        display: block;
    }
    .row {
        padding-top:2%;
    }
    .ivu-col-span-6 {
        display: block;
        width: 18%;
        line-height: 32px;
    }
    .ivu-col-span-9 {
        display: block;
    }
    .btn {
        width:80px;
        margin: 0 auto;
        padding-top: 1%;
    }
    .ivu-col-span-20 {
    display: block;
    width: 50%;
    }
    .accountIcon{
        cursor: pointer;
    }
    .text
    {
        text-align: center;
    }
</style>
